<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 面包屑导航 -->
        <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>活动管理</el-breadcrumb-item>
          <el-breadcrumb-item>活动列表</el-breadcrumb-item>
          <el-breadcrumb-item>活动详情</el-breadcrumb-item>
        </el-breadcrumb>-->
        <!-- 按钮区域 -->
        <el-button size="small">新建目录</el-button>
        <el-button size="small">返回学科</el-button>
        <!-- 搜索区域 -->
        <el-row :gutter="20">
          <el-form ref="searchDirFormRef" :model="queryInfo" label-width="68px">
            <el-col :span="6">
              <el-form-item label="目录名称">
                <el-input v-model="queryInfo.directoryName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="状态">
                <el-select v-model="queryInfo.state" placeholder="请选择">
                  <el-option label="启用" :value="0"></el-option>
                  <el-option label="禁用" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-button>清除</el-button>
              <el-button type="primary">搜索</el-button>
            </el-col>
          </el-form>
        </el-row>
        <!-- 表格数据显示区域 -->
        <el-table :data="dirList" border style="width: 100%">
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column prop="date" label="目录名称"></el-table-column>
          <el-table-column prop="name" label="创建者"></el-table-column>
          <el-table-column prop="address" label="创建日期"></el-table-column>
          <el-table-column prop="address" label="面试题数量"></el-table-column>
          <el-table-column prop="address" label="状态"></el-table-column>
          <el-table-column prop="address" label="操作"></el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list } from '../../api/hmmm/directorys'
export default {
  data() {
    return {
      queryInfo: {
        page: 1,
        pagesize: 5,
        subjectID: '',
        directoryName: '',
        state: ''
      },
      // 目录信息数据数组
      dirList: []
    }
  },
  methods: {
    // 状态改变的事件处理函数
    handleStausChange() {},
    // 获取目录信息数据
    async getDirList() {
      const data = await list(this.queryInfo)
      if (data.status !== 200) return this.$message.error('数据获取失败')
      this.$message.success('数据获取成功')
      this.dirList = data.data.item
      console.log(this.dirList)
    }
  },
  created() {
    this.getDirList()
  }
}
</script>

<style scoped>
.el-row {
  margin: 15px 0;
}
</style>
